<template>
  <view class="my-container" v-if="userInfo">
   <view class="header">
    <van-image round :src="userInfo.avatar" width="6rem" height="6rem" />
   <text class="nickname">{{ userInfo.nickname }}</text>
   </view>
   <view class="body">
      <van-cell title="会员中心" is-link />
      <van-cell title="我的订单" is-link />
      <van-cell title="收货地址" is-link />
      <van-cell title="我的足迹" is-link />
      <van-cell title="我的收藏" is-link />
      <van-cell title="意见反馈" is-link />
    </view>
    <div class="footer">
      <van-button block round type="danger" @click="toexit">退出</van-button>
    </div>
  </view>
</template>

<script setup lang="ts">
import { getUserInof } from '@/api/user';
import type { PartialUser } from '@/types/user';
import { useUserInfo } from '@/store/user'
import { useTabBarTitle } from "@/hooks";
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'

const store = useUserInfo()
useTabBarTitle()

const userInfo = ref<PartialUser>({
  avatar: '',
  nickname:''
})
onShow(async() => {
  if (store.token) {
    const res =await getUserInof()
  userInfo.value=res.data
  } else {
    uni.reLaunch({
          url:'/subcontract/login/index'
        })
  }
})
// const getInfo = async() => {
//   const res =await getUserInof()
//   userInfo.value=res.data
// }
const toexit = () => {
  uni.showModal({
    title: '温馨提示',
    content: '确认退出吗？',
    success: function (res) {
      if (res.confirm) {
        store.setUserInfo('')

        uni.reLaunch({
          url:'/subcontract/login/index'
        })
      } else if (res.cancel) {
        console.log('取消');
        
      }
    }
  })
}
</script>

<style lang="less" scoped>
.my-container {
  .header {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c82519;
    flex-direction: column;
    .nickname {
      margin-top: 20px;
      color: white;
      font-size: 18px;
    }
  }
  .footer {
    padding: 20rpx;
  }
}
</style>
